<template>
  <!-- 加载渲染页面前先判断一下this.goods_info是否有值，有再渲染，防止刚进入或刷新页面时，显示一瞬间的 undefined，因为还没有请求到数据，goods_info: {} -->
  <view v-if="goods_info.goods_name">
    <!-- 轮播图区域 -->
    <swiper class="swiper-container" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1500" :circular="true">
      <swiper-item v-for="(item, i) in goods_info.pics" :key="i" class="swiper-item">
        <image :src="item.pics_big" @click="preview(i)" class="swiper-img"></image>
      </swiper-item>
    </swiper>
    
    <!-- 商品信息区域 -->
    <view class="goods-info-box">
      <!-- 商品价格 -->
      <view class="goods-price">￥{{goods_info.goods_price | tofixed}}</view>
      <view class="goods-info-body">
        <view class="goods-name">{{goods_info.goods_name}}</view>
        <view class="favi">
          <uni-icons type="star" size="18" color="gray" />
          <text>收藏</text>
        </view>
      </view>
      <!-- 运费区域 -->
      <view class="yf">快递：免运费</view>
    </view>
    
    <!-- 商品图文详情区域，要将富文本img图片标签加上style="display:block;" 属性去掉底部空白，在thisgetGoodsList方法里处理 -->
    <view class="goods-introduce">
      <rich-text :nodes="goods_info.goods_introduce" :selectable="false"></rich-text>
    </view>
    
    <!-- 商品组件 uni-goods-nav：用于页面设置显示[客服]和[店铺]图标、[加入购物车]和[立即购买] 按钮，
         组件图标、文字、样式设置见this.options和this.buttonGroup -->
    <view class="goods-nav">  <!-- fill="true",表示按钮圆角,@click图标点击事件，buttonClick按钮点击事件 -->
      <uni-goods-nav 
        :fill="true" 
        :options="options" 
        :buttonGroup="buttonGroup"
        @click="navIconClickHandler"
        @buttonClick="navBtnClickHandler"
      />
    </view>
  </view>
</template>

<script>
  import {mapState, mapActions, mapMutations, mapGetters} from 'vuex'
  export default {
    data() {
      return {
        // 保存商品详情的对象
        goods_info: {},
        // nui-goods-nav 商品导航组件需要使用的属性参数，用于页面设置显示[客服]和[店铺]图标、[加入购物车]和[立即购买] 按钮
        options: [
          {
            icon: 'home',
            text: '首页'
          },
          {
            icon: 'chat',
            text: '客服'
          },
          {
            icon: 'cart',
            text: '购物车',
            info: 0,  // 图标右上角圆形徽标数字：用于表示上上目前购物车有多少件商品，为0，不显示徽标，可定义一个监听器实时监听该值变化
            infoBackgroundColor: '#C00000',  //徽标圆形背景色
            infoColor: '#fff'  // 徽标数字颜色
          }
        ],
        buttonGroup: [
          {
            text: '加入购物车',
            color: '#fff',
            backgroundColor: '#ff0000'
          },
          {
            text: '立即购买',
            color: '#fff',
            backgroundColor: '#ffa200'
          }
        ]
      };
    },
    onLoad(options) {
      // 获取 url 传过来的商品id
      const goods_id = options.goods_id
      // 调用请求商品详细数据的方法
      this.getGoodsDetail(goods_id)
      
      /* 页面加载后，要立即显示底部的购物车图标右上角的徽标数字为购物车中的商品件数 */
      // 查找在 data 节点定义的 option 数组定义有 text: 购物车 的对象
      /* 已通过定义 goodsTotal 的立即监听器(immediate:true)方式解决
      const findResults = this.options.find(x => x.text === '购物车')
      // 更改购物车右上角圆形徽标的数字为实时的购物车商品件数
      if(findResults) {
        findResults.info = this.goodsTotal
      } 
      */
    },
    watch: {
      /* 普通监听器无法监听页面刷新后的结果，需要在onLoad中再读取处理 */
      /* goodsTotal(newVal, oldVal) {  // 定义实时监听器，名字为要监听的data.n值、computed的值或 store.state、store.getters
        // 查找在 data 节点定义的 option 数组定义有 text: 购物车 的对象
        const findResults = this.options.find(x => x.text === '购物车')
        // 更改购物车右上角圆形徽标的数字为实时的购物车商品件数
        if(findResults) {
          findResults.info = newVal
        }
      } */
      // 改为立即监听器(immediate:true)，能在页面重新加载时继续监听新值，不用在 onLoad 中再做处理
      goodsTotal: {  // 定义实时监听器，名字为要监听的data.n值、computed的值或 store.state、store.getters
        immediate: true,  //立即监听器属性
        handler: function(newVal, oldVal) {  // handler是固定的名字：监听器实现函数
          // 查找在 data 节点定义的 option 数组定义有 text: 购物车 的对象
          const findResults = this.options.find(x => x.text === '购物车')
          // 更改购物车右上角圆形徽标的数字为实时的购物车商品件数
          if(findResults) {
            findResults.info = newVal
          }
        }
      }
    },
    filters: {
      tofixed(num) {
        return Number(num).toFixed(2)
      }
    },
    computed: {
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_cart', ['goodsTotal'])
    },
    methods: {
      ...mapActions('m_cart', ['addToCart']),
      // 请求商品详细数据的方法
      async getGoodsDetail(goods_id) {
        const {data: res} = await uni.$http.get('/api/public/v1/goods/detail', {goods_id})
        if(res.meta.status !== 200) return uni.$showMsg()
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ')
        this.goods_info = res.message
        // console.log(this.goods_info)
      },
      // 实现轮播图的预览效果函数
      preview(i) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 点击预览时，默认显示当前索引的图片
          current: i,
          // 所有需要预览的图片url地址数组['图片地址1','图片地址2',...]
          urls: this.goods_info.pics.map(item => item.pics_big)
        })
      },
      /* 底部商品导航组件(icon图标)点击事件处理函数，可用点击事件自动传参的 
         navObj.content.text === this.options[i].text 或 navObj.index 判断点击了哪个图标，navObj.index从0开始
       */
      navIconClickHandler(navObj) {
        if(navObj.content.text === '首页') {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }else if(navObj.content.text === '客服') {
          uni.$showMsg('客服功能开发中')
        }else if(navObj.content.text === '购物车' || navObj.index === 2) {
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },
      // 底部商品导航组件(按钮)点击事件处理函数
      navBtnClickHandler(navObj) {
        if(navObj.content.text === '加入购物车') {
          const goods = {
            goods_id: this.goods_info.goods_id,
            goods_name: this.goods_info.goods_name,
            goods_price: this.goods_info.goods_price,
            goods_count: 1,
            goods_small_logo: this.goods_info.goods_small_logo,
            goods_state: true
          }
          // 调用以上在 methods 节点中用 mapActions 解构出来的 store 的 m_cart 模块的 actions 方法 addToCart
          this.addToCart(goods)
          // 调用以上在 computed 节点中用 mapState 解构出来的 store 的 m_cart 模块的 state 中的 cart 数组
          console.log("this.$store.m_cart.cart = ", this.cart)
          console.log("this.$store.getters['m_cart/goodsTotal'] = ", this.goodsTotal)
        }
      }
    }
  }
</script>

<style lang="scss">
.swiper-container {
  height: 750rpx;
  .swiper-img {
    width: 100%;
    height: 100%;
  }
}

.goods-info-box {
  padding: 10px;
  // padding-right: 0;
  .goods-price {
    font-size: 18px;
    color: #C00000;
    padding: 10px 0;
  }
  
  .goods-info-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .goods-name {
      font-size: 13px;
      padding-right: 10px;
      /* 省略号样式 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .favi {
      width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: gray;
      border-left: 1px solid #efefef;
    }
  }
  
  .yf {
    font-size: 12px;
    color: gray;
    padding: 10px 0;
  }
}

.goods-introduce {
  padding-bottom: 60px;
}

.goods-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
